<template>
  <div>
    <div class="item" v-for="item in modelList" :key="item.id" @click="handleDownLoad(item.id)">{{ item.title }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelList: [
        { id: 0, title: '附件模板：客户数据应用场景' },
        { id: 1, title: '附件模板：个人客户标签' },
        { id: 2, title: '附件模板：企业客户标签' },
      ]
    }
  },
  methods: {
    handleDownLoad(id) {
      const fileList = [
        '/static/files/customerData.xlsx',
        '/static/files/personalCustomer.xlsx',
        '/static/files/enterpriseCustomer.xlsx'
      ]
      const fileUrl = fileList[id]
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = fileUrl
      const file = this.modelList.filter(item => item.id === id)[0]
      a.download = file.title + '.xlsx' // 设置下载时的文件名
      // 将a标签添加到文档中  
      document.body.appendChild(a)
      // 触发点击事件以下载文件  
      a.click() 
      document.body.removeChild(a)
      this.$emit("Close")
    }
  },
  created() {
    this.$emit("SetTitle", "下载模板");
    this.$emit("SetPageWidth", 500);
    this.$emit("SetPageMinHeight", 200);
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  border: 1px solid var(--primary-color);
  border-radius: 20px;
  margin: 10px 0;
  &:hover {
    cursor: pointer;
  }
}
</style>